<template>
	<!-- 权限系统-菜单管理 -->
	<d2-container class="d-flex mod-sys__user flex-column">
		<template v-if="$hasPermission('authority:menu:index')">
			<div class="d-flex h-100 b-s flex-column">
				<el-form class="d-flex b-s my-10" :inline="true" size="small" :model="dataForm"
					@keyup.enter.native="getTableList(false)">
					<el-form-item label="名称">
						<el-input clearable v-model="dataForm.keyword" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="状态">
						<el-select clearable v-model="dataForm.status" placeholder="请选择">
							<el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="模块">
						<el-select clearable v-model="dataForm.module_ids" placeholder="请选择" @focus="authorityFocusFn">
							<el-option v-for="(item,index) in modules" :key="index" :label="item.label"
								:value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="getTableList(false)">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" @click="addOrUpdateData()" v-show="$hasPermission('authority:menu:create')">新增</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-grid keep-source border resizable highlight-hover-row size="small" ref="pGrid"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:columns="columns" height="100%" :data="dataList"
							:edit-config="{trigger: 'click', mode: 'row', showStatus: true}">
						</vxe-grid>
					</div>
				</div>
			</div>
			<!-- 分页 -->
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false" :current-page="dataForm.page" :page-size="dataForm.pageSize"
					:total="total" :layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<menu-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog" @refreshDataList="getTableList"></menu-add-or-update>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex mb-10" :src="permissionBase64" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import MenuAddOrUpdate from './menu-add-or-update'
	import XEUtils from 'xe-utils'
	import {
		type
	} from 'os'
	import store from '@/store/index'
	export default {
		mixins: [mixinViewModule],
		components: {
			MenuAddOrUpdate
		},
		data() {
			return {
				permissionBase64:'',
				tableLoading:false,
				total: 0,
				// 增改弹窗
				addOrUpdateVisible: false,
				status:[
				{
					value:0,
					label:'隐藏',
				},
				{
					value:1,
					label:'显示',
				}],
				modules: [],
				filterName2: '',
				dataForm: {
					page: 1,
					pageSize: 10,
					keyword: '',
					status:'',
					module_ids:''
				},
				dataList: [],
				columns: [{
						title: 'ID',
						field: 'id',
						sortable: true,
						width: 80,
						align: 'center',
					},
					{
						title: '名称',
						field: 'name',
						sortable: false,
						width: 120,
						align: 'center',
					},
					{
						title: '状态',
						field: 'status_name',
						sortable: false,
						width: 100,
						align: 'center'
					},
					{
						title: '模块',
						field: 'model_name',
						sortable: false,
						width: 150,
						align: 'center',
					},
					{
						title: '控制器',
						field: 'controller',
						sortable: false,
						width: 150,
						align: 'center',
					},
					{
						title: '动作',
						field: 'action',
						sortable: false,
						width: 150,
						align: 'center',
					},
					{
						title: '创建时间',
						field: 'created_at',
						sortable: true,
						width: 180,
						align: 'center',
					},
					{
						title: '更新时间',
						field: 'updated_at',
						sortable: true,
						width: 180,
						align: 'center',
					},
					{
						title: '操作',
						field: 'other',
						width: 200,
						fixed: 'right',
						sortable: false,
						align: 'center',
						slots: {
							default: ({
								row
							}) => {
								return [ <el-button size = "mini"
									round
									icon = "el-icon-edit"
									v-show={this.$hasPermission('authority:menu:update')}
									onClick = {
										() => this.addOrUpdateData(row, false)
									}
									type = "primary"
									v-show = {
										!(row.isTop === 1 && row.currentId !== 1)
									}> 修改 </el-button>,
									<el-button size = "mini"
									round
									icon = "el-icon-delete"
									v-show={this.$hasPermission('authority:menu:delete')}
									type = "danger"
									onClick = {
										() => this.deleteHandleSetter(row)
									}
									v-show = {
										!(row.isTop === 1 && row.currentId !== 1)
									}> 删除 </el-button>
								]
							}
						}
					}
				]
			}
		},
		computed: {
		},
		created() {
			if(this.$hasPermission('authority:menu:index')){
				this.getTableList();
			}
		},

		methods: {
			//模块列表
			async authorityFocusFn(){
				const modulesRes = await this.$axios.get('/api/common/module',{})
				this.modules = modulesRes;
			},
			async getTableList() {
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/authority/menu?'+this.$qs.stringify(this.dataForm));
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(row)
				this.addOrUpdateVisible = true;
				if (typeof row == 'object' && row!=null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/authority/menu/update/${id}`,{});
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.menuId = id;
						this.$refs.addOrUpdateDialog.update(userRes);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.menuId = null;
						this.$refs.addOrUpdateDialog.init()
					})
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/authority/menu/delete/${row.id}`,{}
					).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style>
</style>